<template>
	<view class="container">
		<swiper indicator-dots indicator-color="#e583c7" class="tui-banner__height" circular :indicator-dots="false" autoplay :interval="4000" :duration="150">
			<block v-for="(item,index) in swiperList" :key="index">
				<swiper-item>
					<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- 公告 -->
		<view class="" style="padding: 20rpx 0rpx;">
			<tui-notice-bar is-left scrollable color="#f54f46" :content="content">
				<template v-slot:left>
					<view class="tui-padding">
						<tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
					</view>
				</template>
			</tui-notice-bar>
		</view>
		<view class="card-content" style="" v-for="(item,index) in tabelList " :key="index">
			<view class="" style="display: flex;align-items: center;margin-bottom: 10rpx;">
				<tui-icon color="#fb6a6a" name="member-fill"></tui-icon>
				<view class="" style="margin-left: 10rpx;">{{item.name}}</view>
			</view>
			<view class="card-box">
				<view @click="goto(itm.path)" class="card-box-item" v-for="(itm,idx) in item.items " :key="idx">
					<image :src="itm.img" mode="aspectFill"></image>
					<view class="" style="margin-top: 10rpx;color: #200c4f;">
						{{itm.name}}
					</view>
				</view>
			</view>
		</view>
		<tui-fab @click="cikfab" custom="">
			<button class="nonebtn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">客服</button>

		</tui-fab>
	</view>
</template>

<script>
	import dataList from './index.js'
	export default {
		data() {
			return {
				btnList: [{
					bgColor: "#16C2C2",
					//名称
					text: "客服",
					//字体大小
					fontSize: 28,
					//字体颜色
					color: "#fff"
				}, {
					bgColor: "#64B532",
					//名称
					text: "分享",
					//字体大小
					fontSize: 28,
					//字体颜色
					color: "#fff"
				}],
				swiperList: [{
						name: '',
						image: 'https://xhy-1256039008.cos.ap-shanghai.myqcloud.com/xingmeng/image/20250504/eKYMct4QOauVjpWq.png'
					},
					{
						image: 'https://xhy-1256039008.cos.ap-shanghai.myqcloud.com/xingmeng/image/20250504/w8BYkKGfjCuylNAn.png'
					},
					{
						image: 'https://xhy-1256039008.cos.ap-shanghai.myqcloud.com/xingmeng/image/20250504/gnAYHJREld1B8IP0.png'
					}
				],
				tabelList: [{
					name: "最新功能",
					items: [{
						path: '/tools/index1/index',
						name: "房贷计算器",
						img: "https://xhy-1256039008.cos.ap-shanghai.myqcloud.com/xingmeng/image/20250504/kQaUyo6D8npTzXt0.png"
					}, {
						path: '/pages/index/index',
						name: "组件示例",
						img: "https://xhy-1256039008.cos.ap-shanghai.myqcloud.com/xingmeng/image/20250504/kQaUyo6D8npTzXt0.png"
					}, ]
				}],
				content: "点击右下角客服，可与我沟通小程序搭建等其他问题",
				menuList: dataList.menuList,
				weburl: dataList.weburl,
				current: -1,
				sweixin: null
			};
		},
		onLoad() {
			uni.$api.getindex().then(res => {
				this.init()
			})
		},
		watch: {},
		methods: {
			cikfab(e) {
				console.log(e)
			}, 
			init() {

				uni.$api.getbannerlist().then(res => {
					this.swiperList = res.data.rows
				})
				uni.$api.getenumlist({
					filter:JSON.stringify({"show_switch": 1 })
				}).then(res => {
					this.tabelList = groupByToolType(res.data.rows)
					console.log(this.tabelList)

					function groupByToolType(originalArray) {
						// 1. 使用 reduce 按 toolstypelist.id 分组
						const groupedData = originalArray.reduce((acc, item) => {
							const typeId = item.toolstypelist.id;
							const typeName = item.toolstypelist.name;

							// 如果该分类不存在，则初始化
							if (!acc[typeId]) {
								acc[typeId] = {
									name: typeName,
									items: []
								};
							}

							// 添加当前 item 到对应分类的 items 数组
							acc[typeId].items.push({
								path: item.path,
								name: item.name,
								img: item.img_image
							});

							return acc;
						}, {});

						// 2. 将分组后的对象转换为数组
						return Object.values(groupedData);
					}
				})
			},
			goto(path) {
				uni.$utils.goto(path)
			},
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI示例'
			};
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss">
	.nonebtn {
		padding: 0;
		margin: 0;
		background-color: transparent;
	}
	.nonebtn:hover {
		background-color: transparent;
	}
	.nonebtn::after, .nonebtn::before {
		display: none;
		padding: 0;
		margin: 0;
		background-color: transparent;
	}
	.card-content {
		border-radius: 20rpx;
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx 10rpx;
		background-color: #fff;
	}
	.card-box {
		display: flex;
		flex-wrap: wrap;
		.card-box-item {
			margin-top: 20rpx;
			width: 25%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}
	.container {
		background-color: #eef3f9;
		height: 100%;
		.tui-banner__height {
			height: 400rpx;
			width: 100%;
		}
		.tui-content {
			padding: 20rpx 30rpx;
			background-color: #fff;
			color: #555;
			font-size: 26rpx;
		}
	}
</style>